<template>
  <div class="block">
    <ul>
      <!-- <li><a href="javascript:;">项目发布</a></li>
      <li><a href="javascript:;">应用发布</a></li> -->
      <li><a href="javascript:;">产品上架发布</a></li>
      <li><a href="javascript:;">开发者中心 </a></li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 100%;
  height: 100%;
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    width: 100%;
    height: 100%;
    // justify-content: space-between;
    li {
      width: calc(25% - 10px);
      height: 100%;
      list-style: none;
      margin-right: 10px;
      a {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 5px;
        background: url(~@/assets/images/control/bg_1.png) no-repeat
          center/cover;
        padding: 40px 0 0 30px;
        color: #fff;
        &:after {
          content: "";
          width: 10%;
          height: 2px;
          // border-radius: 50%;
          background: #ffffff;
          position: absolute;
          top: 66px;
          left: 30px;
        }
      }
      &:nth-of-type(2) a {
        background: url(~@/assets/images/control/bg_2.png) no-repeat
          center/cover;
      }
      &:nth-of-type(3) a {
        background: url(~@/assets/images/control/bg_3.png) no-repeat
          center/cover;
        // &:after {
        //   content: "";
        //   width: 30%;
        //   height: 2px;
        //   border-radius: 20px;
        //   background: #ffffff;
        //   position: absolute;
        //   top: 66px;
        //   left: 30px;
        // }
      }
      &:nth-of-type(4) a {
        background: url(~@/assets/images/control/bg_4.png) no-repeat
          center/cover;
      }
    }
  }
}
</style>